/*
 * @Author: duchengdong
 * @Date: 2024-03-11 23:21:25
 * @LastEditors: duchengdong
 * @LastEditTime: 2024-03-13 21:14:22
 * @Description:
 */
import {View, Text, ScrollView, Pressable, Dimensions} from 'react-native'
import React, {useState, useRef, useEffect} from 'react'
import {StyleSheet} from 'react-native'
import {formatDateTime} from '../../utils'
import {infoColor, successColor, warningColor, errorColor} from '../../global'
import {ButtonGroup} from '@rneui/themed'
import * as echarts from 'echarts/core'
import {BarChart, LineChart} from 'echarts/charts'
import {ToolboxComponent, LegendComponent, TooltipComponent, DataZoomComponent, GridComponent} from 'echarts/components'
import {SVGRenderer, SvgChart} from '@wuba/react-native-echarts'

const style = StyleSheet.create({
	container: {
		padding: 10,
		height: '100%',
		backgroundColor: '#fff',
	},
	dateTime: {
		color: infoColor,
		marginBottom: 12,
		fontSize: 20,
	},
})

echarts.use([SVGRenderer, BarChart, ToolboxComponent, TooltipComponent, LegendComponent, DataZoomComponent, GridComponent, LineChart])

const E_HEIGHT = 400
const E_WIDTH = Dimensions.get('screen').width - 20

function calcDate(len) {
	const days = len // 近7天
	const dateList = Array.from({length: days}, (v, i) => i).map(day => {
		const date = new Date()
		date.setDate(date.getDate() - day)
		return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
	})
	return dateList
}
function calcValue(len) {
	let res = []
	while (len--) {
		res.push(Math.round(Math.random() * 18).toFixed(1) * 1 + 6)
	}
	return res.reverse()
}
const categories = calcDate(7)
const data = calcValue(7)
const option = {
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'cross',
			label: {
				backgroundColor: '#283b56',
			},
		},
	},
	legend: {},
	toolbox: {
		show: true,
		feature: {
			dataView: {show: false, readOnly: false},
			restore: {},
		},
	},
	dataZoom: {
		show: false,
		start: 0,
		end: 100,
	},
	xAxis: [
		{
			type: 'category',
			boundaryGap: true,
			data: categories,
		},
	],
	yAxis: [
		{
			type: 'value',
			scale: true,
			name: '时长/h',
			max: 24,
			min: 0,
			boundaryGap: [0.2, 0.2],
		},
	],
	series: [
		{
			name: '佩戴时长',
			type: 'bar',
			data: data,
		},
	],
}

export default function Detail() {
	const [selectedIndex, setSelectedIndex] = useState(0)
	const svgRef = useRef(null)
	const [chart, setChart] = useState(null)
	useEffect(() => {
		let inter
		if (svgRef.current) {
			let chart = echarts.init(svgRef.current, 'light', {
				renderer: 'svg',
				width: E_WIDTH,
				height: E_HEIGHT,
			})
			chart.setOption(option)
			setChart(chart)
		}
		return () => {
			chart?.dispose()
			clearInterval(inter)
		}
	}, [])
	const changeType = type => {
		if (type == selectedIndex) return
		setSelectedIndex(type)
		let categories = []
		let data = []
		if (type == 0) {
			categories = calcDate(7)
			data = calcValue(7)
		}
		if (type == 1) {
			categories = calcDate(30)
			data = calcValue(30)
		}
		if (type == 2) {
			categories = calcDate(90)
			data = calcValue(90)
		}
		chart.setOption({
			xAxis: [{data: categories}],
			series: [{data: data}],
		})
	}
	return (
		<ScrollView style={style.container}>
			<View style={{marginBottom: 20}}>
				<View>
					<Text style={style.dateTime}>{formatDateTime()}</Text>
				</View>
				<View>
					<Text style={{fontSize: 18, color: '#333'}}>
						佩戴时长(今日)：<Text style={{fontSize: 26, color: successColor}}>8</Text>小时
					</Text>
				</View>
			</View>
			<View style={{marginBottom: 10}}>
				<ButtonGroup
					buttons={['周', '月', '年']}
					selectedIndex={selectedIndex}
					onPress={value => {
						changeType(value)
					}}
					containerStyle={{marginBottom: 20}}
				/>
			</View>
			<View>
				<SvgChart ref={svgRef} />
			</View>
		</ScrollView>
	)
}
